<template>
  <div>
    <van-search v-model="value" placeholder="搜索歌曲, 歌手, 专辑" fixed />
    <div class="hot_search">
      <p class="hot_title">热门搜索</p>
      <ul class="hot_name_wrap" v-if="isShow">
        <li
          class="hot_item"
          v-for="(obj, index) in list"
          :key="index"
          @click="btn(obj.first)"
        >
          {{ obj.first }}
        </li>
      </ul>
      <div v-else>
        <van-list finished-text="没有更多了">
          <van-cell v-for="item in list1" :key="item.id">
            <template>
              <div class="song_item_wrap">
                <div class="song_left">
                  <p>{{ item.name }}</p>
                  <p>
                    <span> {{ item.album.name }}-</span>
                    <span>{{ item.album.alia }}</span>
                  </p>
                </div>
                <div class="song_right">
                  <i class="iconfont icon-bofang"></i>
                </div>
              </div>
            </template>
          </van-cell>
        </van-list>
      </div>
    </div>
  </div>
</template>
  


<script>
import { Search } from "vant";
import { hotSongsAPI, searchAPI } from "../api/index";
export default {
  data() {
    return {
      value: "", // 搜索关键字
      list: [],
      list1: [],
      isShow: true,
    };
  },
  components: {
    [Search.name]: Search,
  },
  async created() {
    let res = await hotSongsAPI();
    this.list = res.data.result.hots;
    console.log(this.list);
  },
  methods: {
    btn(val) {
      this.value = val;
    },
    async getFn() {
      let reg = await searchAPI({
        keywords: this.value,
      });
      if (!reg.data.result) {
        this.list1 = [];
        this.isShow = true;
      } else {
        this.list1 = reg.data.result.songs;
        this.isShow = false;
      }
    },
  },
  watch: {
    value() {
      this.getFn();
    },
  },
};
</script>

<style scoped>
/* 热门搜索 */
.hot_search {
  padding: 0.266667rem;
}
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

.van-cell {
  padding: 0.133333rem 0.266667rem;
  border-bottom: 1px solid #ccc;
}
</style>